/**
 * +*******************分页
 */
let data = {
    pagenum: 1,
    pagesize: 6,
}
let length

/**
 * *********************ajax渲染文章列表
 */
function getList() {
    $.ajax({
        url: 'http://localhost:8888/api/articles',
        data: data,
        success: function(res) {
            data.total = res.total
            length = Math.ceil(data.total / data.pagesize) //分页
            let arr = []
            res.data.forEach(item => {
                arr.push(` <div class="item">
                    <h4>
                        <a href="./detail.html?id=${item.id}">${item.title}</a>
                    </h4>
                    <p class="meta">
                        <span>15分钟前 分享至</span>
                        <a href="javascript:;" class="wechat"></a>
                        <a href="javascript:;" class="weibo"></a>
                    </p>
                    <p class="brief">${item.content}</p>
                </div>`)
            });
            dynamic(arr.join(''))
        }
    })
}

getList()

/**
 * *********************测试
 */

function dynamic(arr) {

    $('.kr_news_list').append(arr)
}


$('.kr_more').click(function() {

    // 如果没有内容,停止分页
    if (data.pagenum < length) {
        data.pagenum += 1
        getList()
    } else {
        $('.kr_more a').html('已经没更多内容了,点我回顶部')
        $('.kr_more a').css({
            color: '#FF5722',
            border: 0,
            width: 220,
        })

    }
})

let timer = null

// 防抖
$(window).on('scroll', function() {
    clearTimeout(timer)
    timer = setTimeout(() => {
        let height = $(document).height() - $(this).scrollTop()
        if (height < 1400 && height > 1000) {
            $('.kr_more').trigger('click')
        } else if (height > 500 && height < 950) {
            layer.msg('已经到底啦~,点进去一篇看看吧')
        }
    }, 15)

})
setTimeout(function() {
    $('html,body').animate({ 'scrollTop': '0' }, 500, )
}, 0);

$('.kr_more a').on('click', function() {
    $('html,body').animate({ 'scrollTop': '0' }, 500, )
})